var href = decodeURI(location.href)
console.log(href);
var nav = document.querySelector(".nav")
console.log(nav);
var product = document.querySelector(".product")

var timer
var num = 0

// 接收 标题的 titleId
let titleArr = [];
// 接收 每一个div中的内容
let contentArr = [];
const xhr1 = new XMLHttpRequest();
xhr1.open("get","http://chst.vip:1234/api/getbaicaijiatitle",false);
xhr1.onload = function(){
    let res1 = JSON.parse(xhr1.response)
    //console.log(res1);
    //console.log(res1.result);
    let ele1 = "";
    res1.result.forEach(item1 => {
        // 把每个 titleId 存起来
        //console.log(item1.titleId);
        titleArr.push(item1.titleId);
        // 拼接 每一个 一级标题的 结构
        ele1 += `<li titleid=${item1.titleId}>
                    ${item1.title}
                </li>`
    });
    nav.innerHTML = ele1
}
xhr1.send()


console.log(titleArr);
titleArr.forEach(value=>{
    //console.log(value);
    const xhr2 = new XMLHttpRequest();
    xhr2.open("get","http://chst.vip:1234/api/getbaicaijiaproduct?titleid="+value,false);
    xhr2.onload = function(){
        let res2 = JSON.parse(xhr2.response);
        //console.log(res2);
        console.log(res2.result);
        let ele2 = "";
        res2.result.forEach(item=>{
            ele2 += `<li>
                        <div class="product_img">
                            ${item.productImg}
                        </div>
                        <div class="product_right">
                            <div class="title">
                                ${item.productName}
                            </div>
                            <div class="price">
                                ${item.productPrice}
                            </div>
                            <div class="down">
                                <div class="bar" style="width:118px;">
                                    <p style="width:0px;"></p>
                                    <span>0%</span>
                                    <i>${item.productCouponRemain}</i>
                                </div>
                            </div>
                            <div class="quan">
                                ${item.productCoupon}
                            </div>
                        </div>
                    </li>`
        })
        product.innerHTML = ele2
    }
    xhr2.send()
})

var bar = document.querySelector(".bar")
console.log(bar);
var pbox = document.querySelector(".bar p")
console.log(pbox);
console.log(pbox.style.width);
var barwidth = bar.style.width.slice(0,-2); 
console.log(barwidth);
var spanbox = document.querySelector("span")

timer = setInterval(function(){
    num += random(1,3)
    pbox.style.width = num+"px";
    spanbox.innerHTML = (parseInt(pbox.style.width)/barwidth*100).toFixed(2)+"%";
    if(parseInt(pbox.style.width)>=barwidth){
        clearInterval(timer);
        pbox.style.width = bar.style.width;
        spanbox.innerHTML = "100%"
    }
},50)

//${item.productImg}

//第三次获取是为了导航点击切换列表
var libox = document.querySelectorAll(".nav li")
console.log(libox);

libox.forEach(item=>{
    let titleid = item.getAttribute("titleid")
    console.log(titleid);
    item.onclick = function(){
        const xhr3 = new XMLHttpRequest();
        xhr3.open("get","http://chst.vip:1234/api/getbaicaijiaproduct?titleid="+titleid);
        xhr3.send();
        xhr3.onload = function(){
            let res3 = JSON.parse(xhr3.responseText)
            console.log(res3);
            console.log(res3.result);
            let ele3 = "";
            res3.result.forEach(value=>{
                ele3 += `<li>
                            <div class="product_img">
                                ${value.productImg}
                            </div>
                            <div class="product_right">
                                <div class="title">
                                    ${value.productName}
                                </div>
                                <div class="price">
                                    ${value.productPrice}
                                </div>
                                <div class="down">
                                    <div class="bar" style="width:118px;">
                                        <p style="width:0px;"></p>
                                        <span>0%</span>
                                        <i>${value.productCouponRemain}</i>
                                    </div>
                                </div>
                                <div class="quan">
                                    ${value.productCoupon}
                                </div>
                            </div>
                        </li>`
            })
            product.innerHTML = ele3
        }
    }  
})